{% extends 'base.html' %}
{% load static %}

{% block content %}
	<section class="main-content">
      <div class="container-xl">
        <div class="row justify-content-center">
          <div class="col-lg-6">
            <div class="padding-30 rounded bordered bg-white mb-4">
              <h3 class="mb-4 text-center">编辑个人资料</h3>
              <form method="post" action="/user/edit/" enctype="multipart/form-data">
               {% csrf_token %}
                <div class="text-center mb-4">
                  <div class="avatar-edit-wrapper" onclick="document.getElementById('avatarInput').click()">
                    <img id="avatarImg" src="/media/{{ user_head }}" class="rounded-circle" style="width:100px;height:100px;object-fit:cover;" alt="用户头像">
                    <span class="avatar-edit-icon"><i class="icon-note"></i></span>
                    <input id="avatarInput" class="avatar-edit-input" name="user_head" type="file" accept="image/*" onchange="previewAvatar(event)">
                  </div>
{#                    <br><br>#}
{#                    <input type="button" class="btn btn-default btn-sm" id="uploadAvatarBtn" value="上传头像">#}
                </div>
                <div class="mb-3">
                  <label class="form-label">用户名</label>
                  <input type="text" class="form-control" value="{{ name }}" name="name" placeholder="请输入用户名">
                </div>
                <div class="mb-3">
                  <label class="form-label">邮箱</label>
                  <input type="email" class="form-control" value="{{ email }}" name="email" placeholder="请输入邮箱">
                </div>
                <div class="mb-3">
                  <label class="form-label">年龄</label>
                  <input type="number" class="form-control" value="{{ age }}" min="0" max="120" name="age" placeholder="请输入年龄">
                </div>
                <div class="mb-3">
                  <label class="form-label">性别</label>
                  <select class="form-select" name="gender">
                      <option value="1" {% if gender == 1 %}selected{% endif %}>男</option>
                      <option value="2" {% if gender == 2 %}selected{% endif %}>女</option>
                      <option value="3" {% if gender == 3 %}selected{% endif %}>不确定</option>
                  </select>
                </div>
                <div class="mb-3">
                  <label class="form-label">手机号码</label>
                  <input type="text" class="form-control" value="{{ phone_num }}" name="phone_num" placeholder="请输入手机号码">
                </div>
                <div class="mb-3">
                  <label class="form-label">地址</label>
                  <input type="text" class="form-control" value={{ address }} name="address" placeholder="请输入地址">
                </div>
                {% if error_msg %}
                    <span style="color: red">{{ error_msg }}</span>
                {% endif %}
                <div class="d-flex justify-content-between">
                  <a href="/user/person/" class="btn btn-light" style="display: inline-block">返回</a>
                  <input type="submit" class="btn btn-default" value="保存" >
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
{% endblock %}

{% block css %}
	<style>
    .avatar-edit-wrapper {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    .avatar-edit-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fe5e74;
      font-size: 20px;
      opacity: 0;
      transition: opacity 0.2s;
      border: 1px solid #eee;
    }
    .avatar-edit-wrapper:hover .avatar-edit-icon {
      opacity: 1;
    }
    .avatar-edit-input {
      display: none;
    }
  </style>
{% endblock %}

{% block js %}
<script>
function previewAvatar(event) {
    const input = event.target;
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('avatarImg').src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
{#$(function() {#}
{#    $('.avatar-edit-input').change(function() {#}
{#        previewAvatar(event);#}
{#    });#}
{##}
{#    $('#uploadAvatarBtn').click(function () {#}
{#        console.log("点击上传按钮");#}
{#        const fileInput = $('#avatarInput')[0];#}
{#        const file = fileInput.files[0];#}
{##}
{#        if (!file) {#}
{#            alert('请选择一张图片');#}
{#            return;#}
{#        }#}
{##}
{#        const formData = new FormData();#}
{#        formData.append('user_head', file);#}
{##}
{#        $.ajax({#}
{#            url: '{% url "upload_avatar" %}',#}
{#            type: 'POST',#}
{#            data: formData,#}
{#            processData: false,#}
{#            contentType: false,#}
{#            headers: {#}
{#                'X-CSRFToken': '{{ csrf_token }}'#}
{#            },#}
{#            success: function (response) {#}
{#                if (response.code === 200) {#}
{#                    $('#avatarImg').attr('src', response.head_url);#}
{#                    alert(response.msg);#}
{#                } else {#}
{#                    alert(response.msg);#}
{#                }#}
{#            },#}
{#            error: function (xhr, status, error) {#}
{#                console.error("上传失败:", xhr.responseText);#}
{#                alert('上传失败，请查看控制台日志');#}
{#            }#}
{#        });#}
{#    });#}
</script>

{% endblock %}




